1 03-25-24 (Monday)

Let us confess to God those things that are wrong in our work:
That the presence of God at work is often overlooked;
That creative people are often subjected to long, boring and unrelenting routines;
That skills are undeveloped through lack of training;
That resources are wasted in shoddy work and the production of unwanted goods;
That the maximisation of profit often excludes concern for people;
That men and women are discriminated against because of age, race, gender, disability, lack of skill and length of employment;
That the poor stand so little chance against the power of the rich, and the world’s destitute are forgotten.

Lord, have mercy upon us. Forgive us our sins and help us to amend our lives. Amen.
(https://www.theologyofwork.org/work-in-worship)

2 Graphical User Interfaces

  • The first graphical displays of computers were at first only textual (e.g. MS-DOS)
  • Douglas Engelbart’s “Mother of All Demos” (1968) - the first demonstration of interaction based on mouse and screen
  • Xerox Star (1981): first commercial GUI, with a desktop metaphor: windows, icons, folders, etc
    • Why a desktop metaphor? (Notice this isn’t a requirement…)
  • Apple Macintosh (1984): the first mass-market GUI
  • Microsoft Windows (1985): the most popular until today
  • Today: macOS, Linux desktop environments (GNOME, KDE), mobile operating systems (iOS, Android), touchscreen interfaces, gesture controls, voice commands
  • In the future? Virtual and augmented reality interfaces, natural language processing, AI-driven interfaces, etc…?

It is interesting to note how all of this moves out the focus of simply making a program run by itself, and now caring about how an user might behave. The human person is now introduced in the software loop.

3 GUIZero

  • GUIZero is one of the simplest Python’s libraries for working with GUIs.
  • We’ll go through the “Getting Started” tutorial at the website, then “Using Widgets” and “Commands” pages.
    • Let’s also take a look at the widgets that are available for us.
  • Let’s try to implement a simple calculator?

4 UI Elements

  • Graphical User Interfaces research has developed a “grammar” of user interactions. Lots of them use real life metaphors (buttons, toggles, etc) and need to be chosen carefully in a way that is consistent and clear to the user.

4.1 Input Elements

4.2 Informational Elements

4.4 Containers and Layouts

  • When dealing with a GUI library, it is always important to keep attention to layout elements. See, for example, GUIZero guidelines.

4.4.1 Auto-layout parameters

Keep an eye on:

  • Component sizes (width and height);
  • Aligning (center, top, bottom, left or right);
  • Filling (through all width, height, or both);
  • Their behavior when the screen is resized (always test that!)

4.4.2 Grids

Usually you also have the option to specify a virtual grid in which you can position your elements.

This can be very useful when aligning items in a form, for example:

4.4.3 Boxes

Finally, it is also possible to create groups of elements inside boxes. This helps organizing them, which helps both developers and users.

See, for example, how they are used in GUIZero: